<template>
    <framework title="关于三秋" :bg="require('@/assets/img/about-top.png')"
               :wrap-style="{padding:0}" :path="[{name:'关于三秋',path:'/about'}]"
    >
        <div class="about">
            <div class="content main-width">
                <div class="content-info">
                    <div class="content_title f1">
                        北京三秋律师事务所简介：
                    </div>
                    <div class="border">

                    </div>
                    <div class="content_data f3" v-html="info.content">

                    </div>
                </div>
                <div class="content-img">
                    <img src="~@/assets/img/about-slices.png" alt="">
                </div>

            </div>
            <div class="environment">
                <div class="main-width">
                    <div class="title f1">办公环境介绍：</div>
                    <div class="env-image-box">
                        <div class="evn-item" v-for="(item,index) in info.img3" :key="index">
                            <img :src="item" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </framework>
</template>

<script>
import myHead from "@/components/header.vue"
import framework from '@/components/framework'

export default {
    components: {myHead, framework},
    data() {
        return {
            info: {},
        }
    },
    methods: {
        async init() {
            let data = await this.$http.get('/aboutus/info')
            this.info = data.aboutUs
            this.info.img3 = JSON.parse(this.info.img3);
        }
    },
    mounted() {
        this.init()
    }
}
</script>
<style scoped lang="less">

.about {
    background-color: #FFFFFF;

    .content {

        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        padding: 93px 0;

        .content-img {
            margin-left: 50px;

            img {
				display: block;
                width: 100%;
            }
        }

        div {
            //margin: 0 20px;
        }

        .content-info {
            width: 80%;

            .content_data {
                text-indent: 2rem;
                margin-top: 54px;
                line-height: 26px;
                color: #707070;
                letter-spacing: 5px;
            }

            .border {
                margin-top: 14px;
                border: 2px solid #983C1A;
            }

            .content_title {
                font-weight: 400;
                line-height: 30px;
                color: #707070;
            }
        }
    }

    .main-width {

    }

    .environment {
        background: #F3F3F3;
        //    padding: 0 360px;

        .title {
            padding: 80px 0 48px 0;
            margin: auto;
            font-weight: 400;
            line-height: 30px;
            color: #707070;
            opacity: 1;
        }

        .env-image-box {
            height: 50%;
            overflow: hidden;
            margin: 0 auto;
            -moz-column-count: 2;
            -moz-column-gap: 30px;
            -webkit-column-count: 2;
            -webkit-column-gap: 30px;
            -o-column-count: 2;
            -o-column-gap: 30px;

            .evn-item {
                break-inside: avoid;
                -moz-page-break-inside: avoid;
                -webkit-column-break-inside: avoid;
                padding: 14px 0;
                //margin: 0 5px 10px;

                img {
                    width: 100%;
                }
            }
        }
    }
}
</style>
<style lang="less">
@media screen and (min-width: 0px) and (max-width: 680px) {
    #app {
        .about {
            .content {
                flex-direction: column;
                padding: 0;

                .content-info {
                    line-height: 20px;
                    width: 91%;
                    padding-bottom: 10px;

                    .content_title {
                    }
                }
            }

            .environment {
                padding: 0;

                .title {
                }

                .env-image-box {
                    height: auto;

                    .evn-item {
                        width: 90%;
                    }
                }
            }
        }
    }
}
</style>
